<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="库房名称" prop="storehouseName">
				<el-input v-model="queryParams.storehouseName" placeholder="请输入库房名称" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="库房状态" prop="status">
				<el-select v-model="queryParams.status" placeholder="请选择库房状态" clearable>
					<el-option v-for="dict in status" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="Plus" @click="handleAdd"
					v-hasPermi="['deposit:storehouse:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-if="refreshTable" v-loading="loading" :data="storehouseList" row-key="storehouseId"
			:default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
			<el-table-column label="库房名称" align="center" prop="storehouseName" />
			<el-table-column label="显示顺序" align="center" prop="orderNum" />
			<el-table-column label="库房状态" align="center" prop="status">
				<template #default="scope">
					<dict-tag :options="status" :value="scope.row.status" />
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
				<template #default="scope">
					<el-button type="text" icon="Edit" @click="handleUpdate(scope.row)"
						v-hasPermi="['deposit:storehouse:edit']">修改</el-button>
					<el-button type="text" icon="Plus" @click="handleAdd(scope.row)"
						v-hasPermi="['deposit:storehouse:add']">新增</el-button>
					<el-button type="text" icon="Delete" @click="handleDelete(scope.row)"
						v-hasPermi="['deposit:storehouse:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加或修改库房对话框 -->
		<el-dialog :title="title" v-model="open" width="500px" append-to-body>
			<el-form ref="storehouseRef" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="上级库房" prop="parentId" disabled >
					<el-tree-select v-model="form.parentId" :data="storehouseOptions"
						:props="{ value: 'storehouseId', label: 'storehouseName', children: 'children' }"
						value-key="storehouseId" placeholder="请选择上级库房" check-strictly :disabled="prohibitInput" />
				</el-form-item>
				<el-form-item label="库房名称" prop="storehouseName">
					<el-input v-model="form.storehouseName" placeholder="请输入库房名称" />
				</el-form-item>
				<el-form-item label="显示顺序" prop="orderNum">
					<el-input-number v-model="form.orderNum" :min="0" :max="10" />
				</el-form-item>
				<el-form-item label="库房状态" prop="status">
					<el-select v-model="form.status" placeholder="请选择库房状态">
						<el-option v-for="dict in status" :key="dict.value" :label="dict.label"
							:value="parseInt(dict.value)"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="Storehouse">
import {
	listStorehouse,
	getStorehouse,
	delStorehouse,
	addStorehouse,
	updateStorehouse
} from "@/api/deposit/storehouse";
import { ref } from "vue";

const {
	proxy
} = getCurrentInstance();
const {
	status,
	is_delflag
} = proxy.useDict('status', 'is_delflag');

const storehouseList = ref([]);
const storehouseOptions = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const title = ref("");
const isExpandAll = ref(true);
const refreshTable = ref(true);
const prohibitInput = ref(true)

const data = reactive({
	form: {},
	queryParams: {
		parentId: null,
		storehouseName: null,
		orderNum: null,
		status: null,
	},
	rules: {
		parentId: [{
			required: true,
			message: "上级库房不能为空",
			trigger: "blur"
		}],
		storehouseName: [{
			required: true,
			message: "库房名称不能为空",
			trigger: "blur"
		}],
	}
});

const {
	queryParams,
	form,
	rules
} = toRefs(data);

/** 查询库房列表 */
function getList() {
	loading.value = true;
	listStorehouse(queryParams.value).then(response => {
		storehouseList.value = proxy.handleTree(response.data, "storehouseId", "parentId");
		loading.value = false;
	});
}

/** 查询库房下拉树结构 */
function getTreeselect() {
	listStorehouse().then(response => {
		storehouseOptions.value = [];
		const data = {
			storehouseId: 0,
			storehouseName: '顶级节点',
			children: []
		};
		data.children = proxy.handleTree(response.data, "storehouseId", "parentId");
		storehouseOptions.value.push(data);
	});
}

// 取消按钮
function cancel() {
	open.value = false;
	reset();
}

// 表单重置
function reset() {
	form.value = {
		storehouseId: null,
		parentId: null,
		storehouseName: null,
		ancestors: null,
		orderNum: null,
		status: null,
		delflag: null
	};
	proxy.resetForm("storehouseRef");
}

/** 搜索按钮操作 */
function handleQuery() {
	getList();
}

/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm("queryRef");
	handleQuery();
}

/** 新增按钮操作 */
function handleAdd(row) {
	reset();
	getTreeselect();
	if (row != null && row.storehouseId) {
		form.value.parentId = row.storehouseId;
		prohibitInput.value = true
	} else {
		form.value.parentId = 0;
		prohibitInput.value = false
	}
	form.value.orderNum = 0
	open.value = true;
	title.value = "添加库房";
}

/** 展开/折叠操作 */
function toggleExpandAll() {
	refreshTable.value = false;
	isExpandAll.value = !isExpandAll.value;
	nextTick(() => {
		refreshTable.value = true;
	});
}

/** 修改按钮操作 */
async function handleUpdate(row) {
	reset();
	await getTreeselect();
	if (row != null) {
		form.value.parentId = row.storehouseId;
	}
	getStorehouse(row.storehouseId).then(response => {
		form.value = response.data;
		open.value = true;
		title.value = "修改库房";
	});
}

/** 提交按钮 */
function submitForm() {
	proxy.$refs["storehouseRef"].validate(valid => {
		if (valid) {
			if (form.value.storehouseId != null) {
				updateStorehouse(form.value).then(response => {
					proxy.$modal.msgSuccess("修改成功");
					open.value = false;
					getList();
				});
			} else {
				addStorehouse(form.value).then(response => {
					proxy.$modal.msgSuccess("新增成功");
					open.value = false;
					getList();
				});
			}
		}
	});
}

/** 删除按钮操作 */
function handleDelete(row) {
	proxy.$modal.confirm('是否确认删除库房编号为"' + row.storehouseId + '"的数据项？').then(function () {
		return delStorehouse(row.storehouseId);
	}).then(() => {
		getList();
		proxy.$modal.msgSuccess("删除成功");
	}).catch(() => { });
}

getList();
</script>
